<template>
  <div class="bloodChart">
    <div id="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    this.getLineChartInfo();
  },
  methods: {
    // 折线图显示
    createChart(series) {
      console.log(series)
      var chartDom = document.getElementById("lineChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: "#100c2a",
        title: {
          text: "血糖数据",
          textStyle: {
            color: "#EEF1FA",
          },
          padding: 30,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: [
          {
            data: [
              "空腹",
              "早餐前",
              "早餐后",
              "午餐前",
              "午餐后",
              "晚餐前",
              "晚餐后",
              "睡前",
              "凌晨",
              "随机",
            ],
            // 控制显示隐藏按钮未激活状态下字体颜色
            textStyle: {
              color: "#fff",
            },
            // 控制显示隐藏按钮激活状态下字体颜色
            inactiveColor: "#fff",
            padding: 30,
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // X轴
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一",
            "二",
            "三",
            "四",
            "五",
            "六",
            "七",
            "八",
            "九",
            "十",
            "十一",
            "十二",
            "十三",
            "十四",
            "十五",
          ],
          // 改变X轴线条样式
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        // Y轴
        yAxis: {
          splitLine: { show: false },
          type: "value",
          // 改变Y轴线条样式
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        // 鼠标悬停
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
            let data = [];
            let listItem = "";
            for (let i = 0; i < params.length; i++) {
              data[i] = `<div class="hovercontainer" >
                  <span class="circleDot" style="background: ${params[i].color};"></span>
                  <span class="hoverDate">${params[i].data.date}</span><span class="hoverData">${params[i].data.value}mmol/l</span>
                </div>`;
            }
            listItem = data.join(" ");
            return listItem;
          },
        },
        series: series,
      };

      option && myChart.setOption(option);

      // 图表自适应屏幕
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
    // 获取患者测量的所有血糖数据
    getLineChartInfo() {
      let id = this.$route.query.id;
      let data = {
        id,
      };
      this.$api.getLineChartInfo(data).then((res) => {
        console.log(res.data.data);
        let data = res.data.data;
        let seriesData = data.map((item) => {
          return (item = {
            name: item.label,
            type: "line",
            stack: item.label,
            data: item.timeQuantum,
          });
        });
        this.createChart(seriesData);
        // console.log(seriesData)
      });
    },
  },
};
</script>

<style>
.hovercontainer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hovercontainer .circleDot{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hovercontainer .hoverDate,.hovercontainer .hoverData{
  display: block;
  padding: 5px;
  width: 90px;
}
.hovercontainer .hoverDate{
  text-align: left;
}
.hovercontainer .hoverData{
  text-align: right;
}
</style>

<style lang="scss" scoped>
.bloodChart {
  padding-bottom: 50px;
  #lineChart {
    height: 400px;
  }
}
</style>